<template>
    <div class="pos">
      <el-row>
        <el-col :span="9" class="pos-order" id='order-list' >
            <el-tabs type="border-card" tab-position='top'>
              <el-tab-pane label="点餐" >
                <el-table border style="width:100%;" :data="tableData" height="400px">
                  <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
                  <el-table-column label="数量" prop="count" width="70" align="center"></el-table-column>
                  <el-table-column label="金额" prop="price" width="70" align="center"></el-table-column>
                  <el-table-column label="操作" width="100" fixed="right" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="delSingleGood(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                  </template>
                  </el-table-column>

                </el-table>
                <div class="total-div">
                <small>数量：</small> {{totalCount}}   &nbsp;&nbsp;&nbsp;&nbsp; <small>金额：</small> {{totalPrice}}元
                </div>

                <div class="div=btn">
                  <el-button type="warning">挂单</el-button>
                  <el-button type="danger" @click="delAllGoods">删除</el-button>
                  <el-button type="success">结账</el-button>
                </div>

              </el-tab-pane>
              <el-tab-pane label="挂单">挂单</el-tab-pane>
              <el-tab-pane label="外卖">外卖</el-tab-pane>
              </el-tabs>
          
        </el-col>
        <el-col :span="15">
          <div class="offten-goods">
            <div class="title">常用商品</div>
            <div class="offten-goods-list">
              <ul>
                <li v-for="goods in offtenGoods" @click='addOrderList(goods)'>
                  <span>{{goods.goodsName}}</span>
                  <span class="o-price">￥{{goods.price}}元</span>
                </li>
              </ul>
            </div>
        
          </div>
          <div class="goods-type">
              <el-tabs>
                <el-tab-pane label="汉堡">
                  <div>
                    <ul class="cookList">
                      <li v-for="goods in type0Goods" @click='addOrderList(goods)'>
                        <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                        <span class="foodName">{{goods.goodsName}}</span>
                        <span class="foodPrice">￥{{goods.price}}元</span>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="小食">
                  <div>
                    <ul class="cookList">
                      <li v-for="goods in type1Goods" @click='addOrderList(goods)'>
                        <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                        <span class="foodName">{{goods.goodsName}}</span>
                        <span class="foodPrice">￥{{goods.price}}元</span>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="饮料">
                  <div>
                    <ul class="cookList">
                      <li v-for="goods in type2Goods" @click='addOrderList(goods)'>
                        <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                        <span class="foodName">{{goods.goodsName}}</span>
                        <span class="foodPrice">￥{{goods.price}}元</span>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="套餐">
                  <div>
                    <ul class="cookList">
                      <li v-for="goods in type3Goods" @click='addOrderList(goods)'>
                        <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                        <span class="foodName">{{goods.goodsName}}</span>
                        <span class="foodPrice">￥{{goods.price}}元</span>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
              </el-tabs>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
import axios from "axios";
export default {
  name: "pos",
  data() {
    return {
      tableData: [],
      offtenGoods: [],
      type0Goods: [],
      type1Goods: [],
      type2Goods: [],
      type3Goods: [],
      totalCount: 0,
      totalPrice: 0
    };
  },

  methods: {
    addOrderList(goods) {
      this.totalCount = 0;
      this.totalPrice = 0;
      let isHave = false;
      for (let i = 0; i < this.tableData.length; i++) {
        if (goods.goodsId == this.tableData[i].goodsId) {
          isHave = true;
        }
      }
      if (isHave) {
        let arr = this.tableData.filter(o => o.goodsId == goods.goodsId);
        arr[0].count++;
      } else {
        let newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        };
        this.tableData.push(newGoods);
      }

      this.getCountAndPrice();
    },
    delSingleGood(goods) {
      let arr = this.tableData.filter(o => o.goodsId != goods.goodsId);
      this.tableData = arr;
      this.getCountAndPrice();
    },
    delAllGoods() {
      this.tableData = [];
      this.totalCount = 0;
      this.totalPrice = 0;
    },
    getCountAndPrice() {
      this.totalCount = 0;
      this.totalPrice = 0;
      this.tableData.forEach(element => {
        this.totalCount += element.count;
      });
      this.tableData.forEach(element => {
        this.totalPrice += element.price * element.count;
      });
    }
  },
  created: function() {
    axios
      .get("http://jspang.com/DemoApi/oftenGoods.php")
      .then(response => {
        // console.log(response);
        this.offtenGoods = response.data;
      })
      .catch(error => {
        console.log(error);
      });
    axios
      .get("http://jspang.com/DemoApi/typeGoods.php")
      .then(response => {
        console.log(response);
        this.type0Goods = response.data[0];
        this.type1Goods = response.data[1];
        this.type2Goods = response.data[2];
        this.type3Goods = response.data[3];
      })
      .catch(error => {
        console.log(error);
      });
  },
  mounted: function() {
    var orderHeight = document.body.clientHeight;
    document.getElementById("order-list").style.height = orderHeight + "px";
    console.log(orderHeight);
  }
};
</script>
<style scoped>
.table-data{
  text-align: center
}
.pos-order {
  background-color: #f9fafc;
  border-right: 1px solid #c0cddc;
}
.title {
  height: 20px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
  text-align: left;
}

.offten-goods-list ul li {
  list-style: none;
  float: left;
  border: 1px solid #e5e9f2;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
  cursor: pointer;
}
.o-price {
  color: #58b7ff;
}

.goods-type {
  clear: both;
  padding: 10px;
}

.cookList li {
  list-style: none;
  width: 23%;
  border: 1px solid #e5e9f2;
  height: auot;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
  cursor: pointer;
}
.cookList li span {
  display: block;
  float: left;
}
.foodImg {
  width: 40%;
}
.foodName {
  font-size: 18px;
  padding-left: 10px;
  color: brown;
}
.foodPrice {
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
}
.foodName {
  font-size: 14px;
}

.total-div {
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #d3dce6;
  text-align: left;
}
</style>


